/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import _ from 'lodash';
import React, {Component} from 'react';
import {View, TextInput, StyleSheet} from 'react-native';
import { Icon, Picker, List, Switch } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Row, Between, Hand, Text, TouchOpacity
} from '../../../../library';
import HttpTemp from '../../../../preset/func/http/httptemp';

/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class AddAddress extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor (props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            district:[
                {
                    label:'选择省份',
                    value:'选择省份',
                    children:[
                        {
                            label:'选择城市',
                            value:'选择城市',
                            children:[
                                {
                                    label:'选择地区',
                                    value:'选择地区'
                                }
                            ]
                        }
                    ]
                },
                {
                    label:'北京',
                    value:'北京',
                    children:[
                        {
                            label:'朝阳区',
                            value:'朝阳区'
                        },
                        {
                            label:'海淀区',
                            value:'海淀区'
                        },
                        {
                            label:'平谷区',
                            value:'平谷区'
                        },
                        {
                            label:'密云区',
                            value:'密云区'
                        }
                    ]
                },{
                    label:'河北省',
                    value:'河北省',
                    children:[
                        {
                            label:'保定市',
                            value:'保定市',
                            children:[
                                {
                                    label:'北市区',
                                    value:'北市区'
                                },
                                {
                                    label:'南市区',
                                    value:'南市区'
                                },
                                {
                                    label:'新市区',
                                    value:'新市区'
                                },
                            ]
                        },
                        {
                            label:'石家庄市',
                            value:'石家庄市'
                        }
                    ]
                },{
                    label:'天津',
                    value:'天津',
                    children:[
                        {
                            label:'河北区',
                            value:'河北区'
                        },
                        {
                            label:'河东区',
                            value:'河东区'
                        },
                        {
                            label:'南开区',
                            value:'南开区'
                        },
                        {
                            label:'红桥区',
                            value:'红桥区'
                        }
                    ]
                },
            ],
            valueString:'',
            value:['选择省份','选择城市','选择地区'],
            checkedBool:false,
            name:'',
            phone:'',
            valueDetails:'',
            checkedNumber:0,
            id:3
        }
    }


    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
        // SplashScreen.hide();
        
        // 获取信息 获取地址详情接口
        HttpTemp.get({
            url:'/page/mytake/detail.php',
            data:{
                id:this.state.id
            },
            success:(res)=>{
                this.setState({
                    id:res.data.id,
                    name:res.data.set_name,
                    phone:res.data.set_mobile,
                    value:[res.data.set_region],
                    valueDetails:res.data.set_address,
                    checkedNumber:res.data.is_defaulted,
                    boolNumber:res.data.is_defaulted
                })
                if(this.state.checkedNumber){
                    this.setState({
                        checkedBool: true,
                    });
                }else{
                    this.setState({
                        checkedBool: false,
                    });
                }
                console.log('this.state.value++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++',this.state.value)
            }
        })
    }

    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 
     */
    onChange = (value) => {
        console.log('value',value);
        this.setState({ 
            value:value,
            valueString:value.join('') 
        });
        console.log('this.state.value',this.state.value);
    }

    /**
     * 更新地址，调用接口
     */
    editAddress = () =>{
        let region = _.isString(this.state.value) ? this.state.value : this.state.value.join('');
        HttpTemp.post({
            url: '/page/mytake/logic/update.php',
            data:{
                id: this.state.id,
                set_name: this.state.name,
                set_mobile: this.state.phone,
                set_region: this.state.valueString,
                set_address: this.state.valueDetails,
                is_defaulted: this.state.checkedNumber
            },
			success: (res)=> {
				console.log('成功_________________________________需要跳至地址列表页');
                this.setState({addressL:res.data})
			}
        });
    }


    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render(){
        return(
            <Page>
                <Content bg='#efeff4' mt='48'>
                    {/* 表单填写 star */}
                    <View
                        style={{
                            backgroundColor:'#fff',
                            borderRadius:10,
                            borderWidth:1,
                            borderColor:'#f0f0f0',
                            borderBottomWidth:2,
                            borderRightWidth:5,
                            paddingLeft:10,
                            paddingBottom:5,
                            paddingTop:5,
                            marginLeft:6,
                            marginTop:20
                        }}
                    >
                        <View>
                            <TextInput
                                placeholderTextColor="#c9c9c9"
                                underlineColorAndroid='transparent'
                                defaultValue={this.state.name}
                                style={{
                                    padding:0,
                                    borderBottomColor:'#f0f0f0',
                                    borderBottomWidth:1,
                                    height:40
                                }}
                                multiline={true}
                                placeholder='请输入收件人'
                                onChangeText={ (name) =>this.setState({name:name}) }
                            />
                        </View>

                        <View>
                            <TextInput
                                placeholderTextColor="#c9c9c9"
                                underlineColorAndroid='transparent'
                                defaultValue={this.state.phone}
                                style={{
                                    padding:0,
                                    borderBottomColor:'#f0f0f0',
                                    borderBottomWidth:1,
                                    height:40
                                }}
                                multiline={true}
                                maxLength={11}
                                placeholder='联系人电话'
                                keyboardType='phone-pad'
                                onChangeText={ (phone) =>this.setState({phone:phone}) }
                            />
                        </View>

                        <Row bb='1 #f0f0f0'>
                            <Hand df>
                                <Text color='#333'>所在地区：</Text>
                            </Hand>
                            <View style={{flex:1}}>
                                <Picker
                                    data={this.state.district}
                                    title="选择地址"
                                    value={this.state.value}
                                    onOk={this.onChange}
                                    onDismiss={e => console.log('dismiss', e)}
                                    style={{flex:1, backgroundColor:'#0f0',fontSize:12,backgroundColor:"red"}}
                                    itemStyle={styles.itemStyle}
                                    ><List.Item> </List.Item>
                                </Picker>
                            </View>
                        </Row>

                        <View>
                            <TextInput
								placeholderTextColor="#c9c9c9"
                                underlineColorAndroid='transparent'
                                defaultValue={this.state.valueDetails}
                                style={{
                                    padding:0,
                                    borderBottomColor:'#f0f0f0',
                                    borderBottomWidth:1,
                                    height:40
                                }}
                                multiline={true}
                                placeholder='详细地址'
                                onChangeText={ (valueDetails) =>this.setState({valueDetails:valueDetails}) }
                            />
                        </View>

                        <Between h='40' y='center' pr='15'>
                            <Hand>
                                <Text color='#333'>设为默认地址：</Text>
                            </Hand>
                            <List style={{flex:1 }}>
                                <List.Item
                                    extra={<Switch
                                    disabled={this.state.boolNumber}
                                    checked={this.state.checkedBool}
                                    onChange={() => {
                                        if(this.state.checkedBool){
                                            this.setState({
                                                checkedBool: false,
                                                checkedNumber: 0
                                            });
                                        }else{
                                            this.setState({
                                                checkedBool: true,
                                                checkedNumber: 1
                                            });
                                        }
                                    }}
                                    />}
                                > </List.Item>
                            </List>
                            
                            
                        </Between>

                    </View>
                    {/* 表单填写 end */}

                    {/* 保存按钮 star */}
                    <Row pa='20' pt='36'>
                        <TouchOpacity active={0.7} ra='5' bg='#02b349' py='8' f='1' x='center' onPress={this.editAddress}><Text color='#fff' size='16' style={{textAlign:'center'}} >保存</Text></TouchOpacity>
                    </Row>
                    {/* 保存按钮 end */}

                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>编辑地址</Text>
                        <Text> </Text>
                    </Between>
                </Header>
            </Page>
        )
    }
}

const styles = StyleSheet.create({
    itemStyle:{
        fontSize:16,
        color:'#333',
        lineHeight:30
    }
})



